import { useState } from "react";
import { NavBar, Icon, WingBlank, InputItem, Button } from "antd-mobile";
import { reqRegister } from "../../../api/register";
import { passwordReg } from "../../../utils/regs";

import msg from "./msg.png";
import "./index.less";

function PasswordRegister({ location, history }) {
  // 是否是密文
  const [isCiphertext, setIsCiphertext] = useState(true);
  const [password, setPassword] = useState("");
  const [isDisabled, setIsDisabled] = useState(true);

  // 明密文切换
  const changeIsCiphertext = () => {
    setIsCiphertext(!isCiphertext);
  };

  const handleInputChange = (val) => {
    if (passwordReg.test(val)) {
      setIsDisabled(false);
    } else {
      setIsDisabled(true);
    }
    setPassword(val);
  };

  const next = async () => {
    const res = await reqRegister(location.state, password);
    // console.log(res);
    history.push("/", res.data.data.user);
  };

  return (
    <div className="verify-password">
      <NavBar
        mode="light"
        icon={<Icon className="icon-left" type="left" />}
        onLeftClick={() => {}}>
        硅谷注册
      </NavBar>
      <WingBlank>
        <img className="verify-code-msg" src={msg} alt="msg" />
        <p className="verify-code-tip">请设置登录密码</p>
        <InputItem
          type={isCiphertext ? "password" : "text"}
          className="verify-password-btn input-item"
          placeholder="请设置8-20位登录密码"
          value={password}
          onChange={handleInputChange}
          extra={
            <span
              onTouchEnd={changeIsCiphertext}
              className={`iconfont verify-password-icon icon-${
                isCiphertext ? "hide" : "browse"
              }`}></span>
          }
        />
        <p className="verify-password-text">
          密码由8-20位字母、数字或半角符号组成，不能是10位以下纯数字/字母/半角符号，字母需区分大小写
        </p>
        <Button
          type="primary"
          disabled={isDisabled}
          className="btn"
          onClick={next}>
          下一步
        </Button>
        <span className="verify-code-question">
          遇到问题?请<span>联系客服</span>
        </span>
      </WingBlank>
    </div>
  );
}

export default PasswordRegister;
